import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';

class WorkInfo extends Component {
  constructor(props) {
    super(props);
    this.displayAllDescription = this.displayAllDescription.bind(this);
    this.repostToolTip = this.repostToolTip.bind(this);
    this.tooltipTimer = null;
  }

  componentDidMount() {
    if (this.props.isMobile) {
      if (this.textarea.offsetHeight === this.textarea.scrollHeight) {
        this.overlay.style.display = 'none';
        this.displayAll.style.display = 'none';
      } else {
        this.overlay.style.display = 'block';
        this.displayAll.style.display = 'block';
      }
    }
  }

  componentDidUpdate() {
    if (this.props.isMobile) {
      if (this.textarea.offsetHeight === this.textarea.scrollHeight) {
        this.overlay.style.display = 'none';
        this.displayAll.style.display = 'none';
      } else {
        this.overlay.style.display = 'block';
        this.displayAll.style.display = 'block';
      }
    }
  }

  displayAllDescription() {
    this.overlay.style.display = 'none';
    this.displayAll.style.display = 'none';
    this.textarea.style.setProperty('max-height', 'initial', 'important');
    this.textarea.style.setProperty('height', 'auto', 'important');
    this.textarea.style.setProperty('overflow', 'auto', 'important');
  }

  formatDate(dt) {
    const dateTime = new Date(dt);
    const year = dateTime.getFullYear();
    let month = (dateTime.getMonth() + 1).toString();
    if (month.length < 2) {
      month = `0${month}`;
    }
    let day = dateTime.getDate().toString();
    if (day.length < 2) {
      day = `0${day}`;
    }
    return `${year}-${month}-${day}`;
  }

  repostToolTip() {
    if (this.tooltipTimer) {
      window.clearTimeout(this.tooltipTimer);
    }
    this.repostTip.style.display = 'block';
    this.tooltipTimer = window.setTimeout(() => {
      this.repostTip.style.display = 'none';
    }, 2000);
  }

  render() {
    let { work, liked, likeActionStatus, onShare, onLike, onUnlike, isMine, isMobile, location } = this.props;
    work = work || {};
    const likeOrUnlike = liked ? onUnlike : onLike;
    const likingOrUnliking = likeActionStatus === 'like_request' || likeActionStatus === 'unlike_request';
    let className = '';
    className += isMine ? ' mine' : '';
    className += isMobile ? ' mobile' : '';
    const editUrl = `work/${work.id}/edit?returnUrl=${location.pathname}`;
    return (
      <div id="work-info" className={className}>
        <div>
          <h1>{work.name}</h1>
          <p className="intro">作者
            <Link to={`user/${work.userId}`}>
              <span className="author">{work.userName}</span>
            </Link>
          </p>
          <hr />
          <div className="attribute">
            <div className="attr-group">
              <i className="icon-black_menu" />
              <span>{work.categoryName}</span>
            </div>
            <div className="attr-group">
              <i className="icon-black_date" />
              <span>{this.formatDate(work.publishTime)}</span>
            </div>
            <div className="attr-group">
              <i className="icon-black_heart_line" />
              <span>{work.likeCount}</span>
            </div>
            <div className="desc-container">
              <p
                className="textarea"
                ref={(input) => { this.textarea = input; }}
              >
                {work.description}
              </p>
              <div
                className="overlay"
                ref={(input) => { this.overlay = input; }}
              >
                <span />
              </div>
            </div>
            <div ref={(input) => { this.displayAll = input; }} className="show-all">
              <span onClick={this.displayAllDescription}>展示全部<i className="icon-black__down" /></span>
            </div>
            <div className="share-in-mobile">
              <button onClick={this.repostToolTip}>分享给小伙伴</button>

            </div>
            <div className="billboard">
              <div className="splitter">
                <span>嚎，正经的部分结束了，下面开始广告</span>
              </div>
              <div style={{ display: 'none' }} className="board-section tip" ref={(input) => { this.repostTip = input; }}>
                <span className="joke top-caret repost">点击右上角  “...” 随便你想发给谁~</span>
              </div>
              <div className="board-section section1">
                <span className="joke right-caret">好腻害！这是什么软件做的？</span>
                <img className="img-1" src={require('../assets/pic-1.png')} />
              </div>
              <div className="board-section section2">
                <img className="img-2" src={require('../assets/pic-2.png')} />
                <span className="joke left-caret">有眼光~这是最新的应用CastBox!</span>
              </div>
              <div className="board-section section3">
                <span className="joke left-caret">说的就是我啦~~(*´∀`)~♥</span>
                <img className="img-3" src={require('../assets/pic-3.png')} />
              </div>
              <div className="board-section section4">
                <img className="img-body" src={require('../assets/pic-4.png')} />
                <p className="img-caption">戴上 HYPEREAL  VR 头显，拿起 Sens 手柄</p>
              </div>
              <div className="board-section">
                <p className="p2"><a href="https://www.hypereal.com/#/">点这里围观 HYPEREAL VR 头显~</a></p>
              </div>
              <div className="board-section">
                <img className="img-body" src={require('../assets/pic-5.png')} />
                <p className="img-caption">打开自带的 CastBox 应用</p>
              </div>
              <div className="board-section">
                <img className="img-body" src={require('../assets/pic-6.png')} />
                <p className="img-caption">你也可以用组件轻松造出模型</p>
              </div>
              <div className="board-section">
                <img className="img-body" src={require('../assets/pic-7.png')} />
                <p className="img-caption">还可以3D打印，做成自己的手办哦！</p>
              </div>
              <div className="board-section">
                <p className="p2"><a href="https://www.hypereal.com/#/creation/brush">点这里了解 CastBox 更多小秘密!</a></p>
              </div>
              <div className="board-section">
                <img className="img-body" src={require('../assets/pic-8.png')} />
              </div>
            </div>

            <div className="pc-buttons">
              {!isMine && <button className="like" onClick={likeOrUnlike} disabled={likingOrUnliking}>
                <i className={liked ? 'icon-black_heart_full' : 'icon-black_heart_line'} />
                <span>{liked ? '已加入收藏，谢谢~' : '收藏'}</span>
              </button>}
              {isMine && <Link className="edit-btn" to={editUrl}>编辑作品</Link>}
              <div>
                <button className="share" onClick={onShare}><span>分享</span></button>
                {!isMine && false && <button className="report"><i className="icon-black__down" /></button>}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

WorkInfo.propTypes = {
  work: PropTypes.shape({
    workId: PropTypes.string,
    workName: PropTypes.string,
    workAuthorId: PropTypes.string,
    workAuthorName: PropTypes.string,
    workCategoryId: PropTypes.string,
    workCategoryName: PropTypes.string,
    workDateTime: PropTypes.string,
    workLikes: PropTypes.number,
    workDescription: PropTypes.string,
    workLiked: PropTypes.bool,
  }),
  onShare: PropTypes.func,
  isMobile: PropTypes.bool,
  liked: PropTypes.bool,
  likeActionStatus: PropTypes.any,
  onLike: PropTypes.func,
  onUnlike: PropTypes.func,
  isMine: PropTypes.bool,
  location: PropTypes.any
};

export default WorkInfo;
